<template>
	<view>
	<navigator :url="`/pages/goods/detail?id=${book.id}`" class="bookBox">
		<!-- <image class="  goodsimage" :src="book.cover_url"></image> -->
	<view class="wuqi" >	
	<u-lazy-load class="  goodsimage" :image="book.cover_url"  
		 :loading-img="loadingImg" :error-img="loadingImg"
	> </u-lazy-load></view>
		<view class="title u-line-1 ">{{book.title ? book.title : "商品名称"}}</view>
		<view class="u-flex u-row-around">
			<view class="price ">￥ {{book.price}}</view>
			<view class="sales ">销量：{{book.sales}}</view>
		</view>
	</navigator>
	</view>
</template>

<script>
	export default {
		props:['book'],
		data(){
			return{
					loadingImg: 'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg',
			}
		},
	}
</script>

<style scoped lang="scss">
	.wuqi{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.goodsimage{
		height: 100%;
		width: 400rpx;
		// width: 100%;
		// height: 100%;
	}
	.tabs {
		margin: 20rpx 0;
	}
	
	.bookBox {
		padding: 20rpx;
		box-shadow: 0 0 8rpx #eee;
	}
	
	.title {
		margin: 20rpx 0;
		font-weight: bold;
		font-size: 30rpx;
		text-align: center;
		display: inline-block;
		 white-space: nowrap; 
		 width: 100%; 
		 overflow: hidden;
		 text-overflow:ellipsis;
	}
	.price {
		color: #B52D30;
	}
	
	.sales {
		color: #999;
	}
	
</style>